<style type="text/css" media="all">
     body {
  background: rgba(0, 0, 0, 0.5);
}

.box {

  overflow-y: auto;

  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
    padding: 20px;
}

.cur-state {
  font-size: 16px;
  font-weight: bold;
  color: #00CE9B;
  padding: 20px 0 0 24px;
}

.state-box {
  display: flex;
  justify-content: space-around;
  width: 588px;
  margin: auto;
  margin-top: 16px;
  padding: 0 24px;
}

.state-time-box {
  display: flex;
  justify-content: space-around;
  width: 683px;
  /* width: 588px; */
  margin: auto;
  margin-top: 3px;
  padding: 0 24px;
  text-align: center;
}

.state-time {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  width: 133px;
}

.each-state {
  width: 50px;
}

.state-img {
  width: 16px;
  height: 16px;
  /* background: #00CE9B; */
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: block;
  margin: auto;
}

.state-text {
  font-size: 12px;
  margin-top: 8px;
  font-weight: 400;
  text-align: center;
  color: #999999;
}

.cur-text {
  color: #00CE9B;
}

.wire {
  width: 70px;
  height: 0px;
  opacity: 1;
  border: 1px solid #DCDEE5;
  margin-top: 6px;
}

.gap1 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 28px;
}


/* 订单信息 */
.order-info-box {
  padding: 20px 24px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.order-info-head {
  display: flex;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  margin-top: 16px;
}

.order-info-head-text-3 {
  flex: 3;
  text-align: center;
}

.order-info-head-text-2 {
  flex: 1;
  text-align: center;
}

.order-info-matter {
  display: flex;
  border: 1px solid #EEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
}

.gap2 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin: 10px 0;
  /* margin-top: 28px; */
}


/* 项目信息 */
.item-info-box {
  padding: 20px 24px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.item-info-head {
  display: flex;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  margin-top: 16px;
}

.item-info-head-text-5 {
  flex: 4;
  text-align: center;
}

.item-info-head-text-2 {
  flex: 2;
  text-align: center;
}

.item-info-head-text-1 {
  flex: 2;
  text-align: center;
}


.serve-list {
  display: flex;
  height: 58px;
  align-items: center;
  padding-left: 16px;
}

.item-info-matter-text-4 {
  flex: 4;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border-right: 1px solid #EEEEEE;
}

.item-info-matter-text-2 {
  flex: 2;
  text-align: center;
  line-height: 58px;
}

.border-lr {
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
}

/* .item-info-matter-text-1 {
  flex: 2;
  text-align: center;
} */
.item-info-matter {
  display: flex;
  border: 1px solid #EEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
}

.item-info-matter-img {
  width: 38px;
  height: 38px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-right: 12px;
}

.increase {
  width: 32px;
  height: 18px;
  background: #EDEEF1;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  font-weight: 400;
  color: #A4A9B7;
  margin-left: 8px;
}



/* right-box */
.right-box {
  /* float: right; */
  padding: 0 24px;
}

.right-1 {
  display: flex;
  justify-content: right;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.discount {
  background: #2C2B31;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #F6E0B9;
  padding: 1px 5px;
}

.yhq {
  font-size: 14px;
  margin-left: 32px;
  font-weight: 400;
  color: #333333;
}

.yhq-money {
  color: #FF1F2B;
}

.cj {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 32px;
}

.cj-money {
  color: #FFA600;
}

.right-2 {
  display: flex;
  justify-content: right;
  margin-top: 10px;
}

.right-3 {
  display: flex;
  justify-content: right;
  height: 27px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
  margin-top: 14px;
}

.heji-money {
  color: #FF1F2B;
  font-size: 18px;
}


.serve-title {
  font-size: 14px;
  padding: 24px 0 0 20px;
  font-weight: bold;
  color: #333333;
}



/* 服务者信息 */
.user-info {
  display: flex;
  padding: 17px 24px 0 24px;
}

.user-img {
  width: 48px;
  height: 48px;
  background: #D9D9D9;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.user-mobile {
  font-size: 14px;
  margin-top: 8px;
  font-weight: 400;
  color: #666666;
}

.info-r-text {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  padding: 16px 0 0 24px;
}

.field {
  color: #999;
}

.server-box {
  display: flex;
}

.serve-l {
  flex: 3;
}

.serve-r {
  flex: 4;
  display: flex;
  justify-content: space-around;
}

.gap3 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 20px;
}



/* 佣金 */
.item-info-yj-text-1 {
  flex: 1;
  text-align: center;
}

.border-l {
  border-left: 1px solid #EEEEEE;
}

.text-red {
  color: #FF1F2B;
}


div::-webkit-scrollbar {
  width: 4px;
}
/* // 滚动条轨道 */
div::-webkit-scrollbar-track {
  background: #FFF;
  border-radius: 2px;
}
/* // 小滑块 */
div::-webkit-scrollbar-thumb {
  background: #D9D9D9;
  border-radius: 10px;
}
 </style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="gap2"></div>
    
    <div class="item-info-box">
      <div class="title">订单信息</div>
      <div class="item-info-head">
        <div class="item-info-head-text-5">详情</div>
        <div class="item-info-head-text-2">规格</div>
        <div class="item-info-head-text-1">数量</div>
        <div class="item-info-head-text-2">价格（元）</div>
      </div>

      <div class="item-info-matter">
        <div class="item-info-matter-text-4 serve-list">
          <img class="item-info-matter-img" src="{$detail.image}" alt="">
          <span>{$detail.name}</span>
        </div>
        <div class="item-info-matter-text-2">{$detail.sku_name}</div>
        <div class="item-info-matter-text-2 border-lr">{$detail.num}</div>
        <div class="item-info-matter-text-2">￥{$detail.price}</div>
      </div>
      {volist name="addList" id="vo"}
      <div class="item-info-matter">
        <div class="item-info-matter-text-4 serve-list">
          <span>{$vo.name}</span>
          <span class="increase">加项</span>
        </div>
        <div class="item-info-matter-text-2">{$vo.cost_seconds}分钟</div>
        <div class="item-info-matter-text-2 border-lr">{$vo.num}</div>
        <div class="item-info-matter-text-2">￥{$vo.price}</div>
      </div>
      {/volist}
    </div>

    <!-- right -->
    <div class="right-box">
      <div class="right-1">
        <div class="">
          折扣
        </div>
        <div class="">
          ￥{$row.goods_total_price}
          <span class="discount">{$row.discount/10}折</span>
        </div>
        <div class="yhq">
          优惠券抵扣：<span class="yhq-money">-￥{$row.coupon_price}</span>
        </div>
      </div>
      <div class="right-2">
        <div class="cj">
          补差金额：<span class="cj-money">￥{$row.premium_price}</span>
        </div>
        <div class="cj">
          加项金额：<span class="cj-money">￥{$row.add_price}</span>
        </div>
        <div class="yhq">
          出行费用：￥{$row.travel_price}
        </div>
      </div>
      <div class="right-3">
        <div>
          合计：
          <span class="heji-money">￥{$row.payprice}</span>
        </div>
      </div>
    </div>
    <div class="gap2"></div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Refund_price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-refund_price" data-rule="required" min="0" class="form-control" step="0.01" name="row[refund_price]" type="number" value="">
        </div>
    </div>
    {eq name="row.to_shop" value="door"}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Act_travel_price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-act_travel_price" data-rule="required" min="0" class="form-control" step="0.01" name="row[act_travel_price]" type="number" value="{$row.act_travel_price|htmlentities}">
        </div>
    </div>
    {/eq}
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">温馨提示:</label>
        <div class="col-xs-12 col-sm-8" style="margin-top:4px;">
            {:__('Refund_price')}是直接原路返回给用户。<br/>
            {:__('Act_travel_price')}是给服务人员，用来补贴路费的，不参与结算。<br/>
            {:__('Refund_price')} + {:__('Act_travel_price')}不能大于付款金额。<br/>
            付款金额 - {:__('Refund_price')} - {:__('Act_travel_price')} = 结算金额，是后续结算佣金的基数。
        </div>
    </div>

    <div class="form-group"><input type="hidden" name="row[id]" value="{$id}" class="form-control" ></div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed">{:__('OK')}</button>
        </div>
    </div>
</form>